<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<!-- 元素遍历：  用于DOM树中遍历元素 【理解：针对元素嵌套，父子级】
		 children()       功能：获取匹配元素集合中每个元素的子元素
		 parent()         功能：获取匹配元素集合中每个元素的父元素
		 
		 siblings()       功能：获取匹配元素集合中每个元素的所有兄弟元素
		 
		 next()           功能：获取匹配元素集合中每个元素的下一个兄弟元素
		 prev()           功能：获取匹配元素集合中每个元素的上一个兄弟元素
		 
		 each()           功能：遍历匹配元素的集合--遍历所有子元素
		                  语法糖：each(function(index,element){
							  $(element).text(``)
							  注意：打印遍历的值，不可以使用单双引号+拼接
							  功能：获取到的元素，遍历元素内容
						  })     
						  index形参  下标，element形参  元素
		 -->
		 <style>
			 div.container{
				 border: 1px solid red;
				 margin: 10px;
				 padding: 10px;
			 }
			 .box{
				 background: #aaaa00;
				 margin: 10px;
				 padding: 10px;
			 }
			 button{
				 padding: 5px;
			 }
		 </style>
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
			<div class="box" id="box5">盒子5</div>
			<div class="box" id="box6">盒子6</div>
		</div>
		<button id="gc">获取子元素</button>
		<button id="gp">获取父元素</button>
		<button id="gs">获取兄弟元素</button>
		<button id="gn">获取下一个兄弟元素</button>
		<button id="gr">获取上一个兄弟元素</button>
		<button id="loop">遍历元素</button>
		<script>
			/* 1.点击 获取子元素 按钮  实现.container下 所有子元素添加背景色*/
			$('#gc').click(function(){
				//通过 父找子 函数 --添加效果
				$('.container').children().css("background-color","#ff0");
			});
			/* 2.点击 获取父元素 按钮  实现.container添加背景色*/
			$('#gp').click(function(){
				$('.box').parent().css("background-color","#aaaaff");
			});
			/* 3.点击 获取兄弟元素 按钮  实现除了#box4字体颜色不变其他都变色*/
			$('#gs').click(function(){
				$('#box4').siblings().css("color","#00aaff");
			});
			/* 4.点击 获取下一个兄弟元素 按钮  实现#box4 下一个兄弟，添加背景色 */
			$('#gn').click(function(){
				$('#box4').next().css("background-color","#ffaaff");
			});
			/* 5.点击 获取上一个兄弟元素  按钮 实现#box6 上一个兄弟，添加效果 */
			$('#gr').click(function(){
				$('#box6').prev().css({
					"background-image":"url(../img/5.png)",
					"border":"5px solid #f00",
					"width":"100px",
					"height":"100px",
					"background-size":"100% 100%",
					"border-radius":"50%",
					"color":"transparent",
				    "box-shadow":"5px 5px 10px #ff0"
				});
			});
			/* 6.点击 遍历元素 按钮   实现每个盒子上 这是第几个盒子 */
			$('#loop').click(function(){
				//通过 .box抓到6个元素【一组集合】
				$('.box').each(function(i,e){  //e元素  i下标
					//每个盒子加文字：这是第几个盒子
					$(e).text(`这是第${i+1}盒子`);
				});
			});
		</script>
	</body>
</html>